<template>
  <div>
    <div>
      <h4>路灯状态统计</h4>
      <data-tabs :option="easyDataOption"></data-tabs>
    </div>

    <div>
      <h4>图表展示</h4>
      <el-row :gutter="20">
        <el-col :span="12">
          <v-chart :options="bar" />
        </el-col>
        <el-col :span="12">
          <v-chart :options="thebar" />
        </el-col>
        <!--
        <el-col :span="12">
          <v-chart :options="themonth" />
        </el-col>
        <el-col :span="12">
          <v-chart :options="theline" />
        </el-col>
        -->
      </el-row>
    </div>

    <!--
    <el-card shadow="never" class="aui-card--fill">
      <div class="mod-home">
        <el-row :gutter="20">
          <el-col :span="12" :xs="24">
            <table>
              <tr>
                <th>{{ $t('home.sysInfo.name') }}</th>
                <td>{{ $t('home.sysInfo.nameVal') }}</td>
              </tr>
              <tr>
                <th>{{ $t('home.sysInfo.version') }}</th>
                <td>{{ $t('home.sysInfo.versionVal') }}</td>
              </tr>
              <tr>
                <th>{{ $t('home.sysInfo.osName') }}</th>
                <td>{{ sysInfo.osName }}</td>
              </tr>
              <tr>
                <th>{{ $t('home.sysInfo.osVersion') }}</th>
                <td>{{ sysInfo.osVersion }}</td>
              </tr>
              <tr>
                <th>{{ $t('home.sysInfo.osArch') }}</th>
                <td>{{ sysInfo.osArch }}</td>
              </tr>
              <tr>
                <th>{{ $t('home.sysInfo.processors') }}</th>
                <td>{{ sysInfo.processors }}</td>
              </tr>
              <tr>
                <th>{{ $t('home.sysInfo.totalPhysical') }}</th>
                <td>{{ sysInfo.totalPhysical }}MB</td>
              </tr>
              <tr>
                <th>{{ $t('home.sysInfo.freePhysical') }}</th>
                <td>{{ sysInfo.freePhysical }}MB</td>
              </tr>
              <tr>
                <th>{{ $t('home.sysInfo.memoryRate') }}</th>
                <td>{{ sysInfo.memoryRate }}%</td>
              </tr>
              <tr>
                <th>{{ $t('home.sysInfo.userLanguage') }}</th>
                <td>{{ sysInfo.userLanguage }}</td>
              </tr>
            </table>
          </el-col>
          <el-col :span="12" :xs="24">
            <table>
              <tr>
                <th>{{ $t('home.sysInfo.jvmName') }}</th>
                <td>{{ sysInfo.jvmName }}</td>
              </tr>
              <tr>
                <th>{{ $t('home.sysInfo.javaVersion') }}</th>
                <td>{{ sysInfo.javaVersion }}</td>
              </tr>
              <tr>
                <th>{{ $t('home.sysInfo.javaHome') }}</th>
                <td>{{ sysInfo.javaHome }}</td>
              </tr>
              <tr>
                <th>{{ $t('home.sysInfo.userDir') }}</th>
                <td>{{ sysInfo.userDir }}</td>
              </tr>
              <tr>
                <th>{{ $t('home.sysInfo.javaTotalMemory') }}</th>
                <td>{{ sysInfo.javaTotalMemory }}MB</td>
              </tr>
              <tr>
                <th>{{ $t('home.sysInfo.javaFreeMemory') }}</th>
                <td>{{ sysInfo.javaFreeMemory }}MB</td>
              </tr>
              <tr>
                <th>{{ $t('home.sysInfo.javaMaxMemory') }}</th>
                <td>{{ sysInfo.javaMaxMemory }}MB</td>
              </tr>
              <tr>
                <th>{{ $t('home.sysInfo.userName') }}</th>
                <td>{{ sysInfo.userName }}</td>
              </tr>
              <tr>
                <th>{{ $t('home.sysInfo.systemCpuLoad') }}</th>
                <td>{{ sysInfo.systemCpuLoad }}%</td>
              </tr>
              <tr>
                <th>{{ $t('home.sysInfo.userTimezone') }}</th>
                <td>{{ sysInfo.userTimezone }}</td>
              </tr>
            </table>
          </el-col>
        </el-row>
      </div>
    </el-card>
    -->
  </div>

</template>

<script>
import ECharts from "vue-echarts";

import "echarts/lib/chart/bar"; //柱状图
import "echarts/lib/chart/line"; //折线图
import "echarts/lib/component/tooltip"; //提示框组件
import "echarts/lib/component/title";
import "echarts/lib/component/legend";


import dataTabs from '@/components/data-tabs'

export default {
  data() {
    return {
      sysInfo: {
        osName: "",
        osVersion: "",
        osArch: "",
        processors: 0,
        totalPhysical: 0,
        freePhysical: 0,
        memoryRate: 0,
        userLanguage: "",
        jvmName: "",
        javaVersion: "",
        javaHome: "",
        userDir: "",
        javaTotalMemory: 0,
        javaFreeMemory: 0,
        javaMaxMemory: 0,
        userName: "",
        systemCpuLoad: 0,
        userTimezone: ""
      },
      bar: null,
      thebar: null,
      theline: null,
      themonth: null,
      easyDataOption: {
        span: 6,
        data: [
          {
            title: '开启',
            subtitle: '实时',
            count: 7993,
            allcount: 10222,
            text: '路灯总数',
            color: '#FFA500',
            key: '开'
          },
          {
            title: '关闭',
            subtitle: '实时',
            count: 3112,
            allcount: 10222,
            text: '路灯总数',
            color: '#636363',
            key: '关'
          },
          {
            title: '正常',
            subtitle: '实时',
            count: 908,
            allcount: 10222,
            text: '路灯总数',
            color: '#00CD66',
            key: '好'
          },
          {
            title: '损坏',
            subtitle: '实时',
            count: 308,
            allcount: 10222,
            text: '路灯总数',
            color: '#CD5555',
            key: '坏'
          }
        ]
      }
    };
  },
  created() {
    this.getSysInfo();
    this.initBar();
    this.initTheBar();
    this.initLine();
    this.initMonth();
  },
  mounted: function () { },
  components: {
    "v-chart": ECharts,
    dataTabs
  },
  methods: {
    getSysInfo() {
      this.$http
        .get("/sys/info")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.sysInfo = res.data;
        })
        .catch(() => { });
    },
    initBar() {
      this.bar = {
        title: {
          text: "用电量统计图"
        },
        tooltip: {},
        grid: {
          top: 56,
          left: 18,
          right: 26,
          bottom: 6,
          containLabel: true
        },
        legend: {
          data: ["用电量"]
        },
        xAxis: {
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
        },
        yAxis: {},
        series: [
          {
            name: "用电量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20, 15, 23, 46, 10, 33, 20]
          }
        ]
      };
    },
    initTheBar() {
      //this.axios.get('/url').then((data) => {this.polar={}}
      let data_title = ["路灯开启数量", "路灯关闭数量"];
      let cities = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月"];
      let param_a = [511111, 411111, 311111, 211111, 111111, 611111, 911111, 811111, 911111, 711111];
      let param_c = [111112, 111113, 211114, 311115, 111116, 111117, 111118, 111119, 111110, 11111];
      let obj = {
        m10: {
          compare_yearsfee: "9"
        }
      };
      this.thebar = {
        title: {
          text: "路灯开/关数量统计图"
        },
        legend: {
          show: true,
          data: data_title,
          textStyle: {
            color: "#333"
          },
          top: 2,
          right: 10
        },
        tooltip: {
          trigger: "axis",
          formatter: obj.m10.compare_yearsfee == "" ? "{b}<br/>{a0}:{c0}" : "{b}<br/>{a0}:{c0}<br/>{a1}:{c1}"
        },
        grid: {
          top: 56,
          left: 18,
          right: 26,
          bottom: 6,
          containLabel: true
        },
        color: ["#0f0", "#c23531", "#2f4554", "#61a0a8", "#d48265", "#91c7ae", "#749f83", "#ca8622", "#bda29a", "#6e7074", "#546570", "#c4ccd3"],
        xAxis: {
          type: "category",
          data: cities,
          boundaryGap: true, //两边留白
          splitLine: {
            show: false, //隐藏分割线
            lineStyle: {
              color: "#ddd",
              type: "solid"
            }
            //interval: 3,
          },
          axisLine: {
            lineStyle: {
              color: "#ddd"
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            //轴线刻度设置
            //interval: 1,
            formatter: "{value}",
            color: "#000"
          }
        },
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value}",
              margin: 15,
              color: "#000"
            },
            name: "kW.h",
            nameGap: 6,
            splitLine: {
              show: true,
              lineStyle: {
                color: "#ccc",
                type: "solid"
              }
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#ccc"
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "路灯开启数量",
            type: "bar",
            itemStyle: {
              normal: {
                color: "#FFA500",
                //shadowColor : 'rgba(0,0,0,0.5)',
                //shadowBlur: 8,
                //shadowOffsetX: 8,
                //shadowOffsetY: 10,
                barBorderRadius: [5, 5, 0, 0]
              }
            },
            // itemStyle: {
            //     normal: {
            //         color: '#1586ec'
            //     }
            // },
            data: param_a
            //legendHoverLink: false,
            // emphasis: {
            //   itemStyle: {
            //     color: '#6D92EE'
            //   }
            // }
          },
          {
            name: "路灯关闭数量",
            type: "bar",
            itemStyle: {
              normal: {
                color: "#636363",
                barBorderRadius: [5, 5, 0, 0]
              }
            },
            data: param_c,
            //legendHoverLink: false,
            barCategoryGap: "50%"
            // emphasis: {
            //   itemStyle: {
            //     color: '#E6E8EB'
            //   }
            // }
          }
        ],
        animationDuration: 2000,
        silent: true
      };
    },
    initLine() {
      var obj = {
        m01: {
          lift_rates: [80.6, 80.3, 80, 79.7, 79.3, 79, 78.6, 78.1, 77.7, 77.3, 76.8, 76.3, 75.7, 75.2, 74.6, 74.1, 73.5, 72.8, 72.2, 71.5, 70.8, 70.1, 69.3, 68.4, 67.6, 66.6, 65.7, 64.4, 63.1, 61.8, 60.4, 58.8, 57.2, 55.4, 53.5, 51.3, 48.8, 46.2, 43.5, 40.7, 37.7, 34.7, 31.7, 28.9, 26.1, 23.3, 20.5, 18.1, 15.7, 13.5, 11.3, 9.6, 7.9, 6.3, 5, 3.9, 3, 2.3],
          lost_ability: 23.93,
          pre_rem: 30.11,
          heal_rates: [75.1, 74.6, 73.9, 73.3, 72.7, 72, 71.4, 70.7, 69.9, 69.2, 68.4, 67.7, 66.9, 66, 65.1, 64.3, 63.4, 62.5, 61.5, 60.5, 59.5, 58.5, 57.5, 56.3, 55.2, 54, 52.8, 51.4, 49.9, 48.4, 46.9, 45.3, 43.6, 41.9, 40.1, 38.1, 35.9, 33.7, 31.5, 29.2, 26.8, 24.6, 22.4, 20.3, 18.3, 16.2, 14.2, 12.5, 10.8, 9.3, 7.8, 6.5, 5.4, 4.3, 3.4, 2.7, 2.1, 1.6],
          lift_fee: 196719,
          rates_ages: [42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99],
          pre_lift: 71.11,
          lost_heal_ratio: ["7.3", "7.6", "8.3", "8.7", "9.1", "9.7", "10.1", "10.5", "11.2", "11.7", "12.3", "12.7", "13.2", "13.9", "14.6", "15.2", "15.9", "16.5", "17.4", "18.2", "19.0", "19.8", "20.5", "21.5", "22.5", "23.3", "24.4", "25.3", "26.5", "27.7", "28.8", "29.8", "31.2", "32.2", "33.4", "34.6", "35.9", "37.1", "38.1", "39.4", "40.7", "41.1", "41.5", "42.4", "42.6", "43.8", "44.4", "44.8", "45.4", "45.2", "44.9", "47.7", "46.3", "46.5", "47.1", "44.4", "42.9", "43.8"]
        }
      };
      var n = Math.ceil(obj.m01.pre_lift);
      var tmp_a = parseInt(n) - parseInt(obj.m01.rates_ages[0]) + 1;
      var age = obj.m01.rates_ages.slice(0, tmp_a);
      var survival = obj.m01.lift_rates.slice(0, tmp_a);
      var disability = obj.m01.lost_heal_ratio.slice(0, tmp_a);
      this.theline = {
        legend: {
          data: ["健康率", "失能率"],
          textStyle: {
            color: "#000"
          },
          top: 0,
          right: 12
        },
        tooltip: {
          trigger: "axis",
          formatter: "{b}岁<br/>{a0}:{c0}%<br/>{a1}:{c1}%"
        },
        grid: {
          top: 46,
          left: 8,
          right: 22,
          bottom: 10,
          containLabel: true
        },
        color: ["#0f0", "#c23531", "#2f4554", "#61a0a8", "#d48265", "#91c7ae", "#749f83", "#ca8622", "#bda29a", "#6e7074", "#546570", "#c4ccd3"],
        //toolbox: {
        //    feature: {
        //        saveAsImage: {}
        //    }
        //},
        xAxis: {
          type: "category",
          data: age,
          boundaryGap: false,
          splitLine: {
            show: true, //隐藏分割线
            lineStyle: {
              color: "#f5f5f5",
              type: "solid"
            }
            //interval: 3,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#a9a8a8"
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            //轴线刻度设置
            //interval:6,
            formatter: "{value}岁"
          }
        },
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 100,
            axisLabel: {
              color: "#a9a8a8",
              formatter: "{value}%"
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#f5f5f5"
              }
            },
            interval: 25,
            splitLine: {
              show: false,
              lineStyle: {
                color: "#ddd",
                type: "solid"
              }
            }
          },
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#f5f5f5",
                type: "solid"
              }
            }
          }
        ],
        series: [
          {
            name: "健康率",
            type: "line",
            lineStyle: {
              normal: {
                width: 3,
                color: "#6293f5",
                shadowColor: "rgba(0,0,0,0.5)",
                shadowBlur: 8,
                shadowOffsetX: 8,
                shadowOffsetY: 10
              }
            },
            itemStyle: {
              normal: {
                color: "#6293f5"
              }
            },
            data: survival,
            showSymbol: false
          },
          {
            name: "失能率",
            type: "line",
            lineStyle: {
              normal: {
                width: 3,
                color: "#f5495b",
                shadowColor: "rgba(0,0,0,0.5)",
                shadowBlur: 8,
                shadowOffsetX: 8,
                shadowOffsetY: 10
              }
            },
            itemStyle: {
              normal: {
                color: "#f5495b"
              }
            },
            data: disability,
            showSymbol: false
          }
        ]
      };
    },
    initMonth() {
      this.themonth = {
        tooltip: {
          trigger: "axis"
        },
        grid: {
          top: "3%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["1号", "2号", "3号", "4号", "5号", "6号", "7号", "8号", "9号", "10号", "11号", "12号", "13号", "14号", "15号", "16号", "17号", "18号", "19号", "20号", "21号", "22号", "23号", "24号", "25号", "26号", "27号", "28号", "29号", "30号", "31号"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        textStyle: {
          color: "#838FA1"
        },
        series: [
          {
            name: "新增用户",
            type: "line",
            stack: "总量",
            areaStyle: {
              normal: {}
            },
            data: [120675, 118962, 101754, 114865, 119076, 111752, 123965, 120363, 113435, 112065, 125042, 120278, 138703, 136790, 135708, 150287, 163187, 150569, 157826, 182633, 199375, 195334, 205617, 220527, 234721, 240938, 239065, 263334, 285365, 302602, 361553],
            itemStyle: {
              normal: {
                color: "#1cabdb",
                borderColor: "#1cabdb",
                borderWidth: "2",
                borderType: "solid",
                opacity: "1"
              },
              emphasis: {}
            }
          }
        ]
      };
    }
  }
};
</script>
